<template>
  <div class="kanjia">
    <my-header>砍价列表</my-header>
    <van-card
      v-for="(item, index) in list"
      :key="index"
      :desc="item.characteristic"
      :title="item.name"
      :thumb="item.pic"
    >
      <template #tags>
        <section>
          <span>
            <p style="color:red">￥{{item.minPrice}}</p>
            <p>低价</p>
          </span>
          <span>
            <p>￥{{item.originalPrice}}</p>
            <p>原价</p>
          </span>
          <span>
            <p>{{item.stores}}件</p>
            <p>限量</p>
          </span>
        </section>
      </template>
    </van-card>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myHeader from "../../components/myHeader.vue";
import { getKanjia } from "../../api/second/second";
export default {
  components: { myHeader },
  setup() {
    const data = reactive({
      list: {}, // 存放砍价的数据的
    });
    getKanjia().then((res) => {
      data.list = res.data.goodsMap;
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.kanjia {
  height: 100%;
}
.van-card{
   background: #fff;
}
section{
  display: flex;
  margin-top: 20px;
  span{
     padding: 10px 20px;
     text-align: center;
     color: #B2B2B2;
  }
  &>span:first-child{
    color: #000;
  }
}
</style>